require('normalize.css/normalize.css');
require('styles/App.css');

var imageDatas = require('../data/imageDatas.json')
import React from 'react';
import ReactDOM from 'react-dom';

// 利用自执行函数， 将图片名信息转成图片URL路径信息
imageDatas = (function getImageURL(imageDatasArr){
	for(var i=0, j = imageDatasArr.length; i < j; i++){
		var singleImageData = imageDatasArr[i];
		singleImageData.imageURL = require('../images/' + singleImageData.fileName);
		imageDatasArr[i] = singleImageData;
	}

	return imageDatasArr;
})(imageDatas);


/*
 * 获取区间内的一个随机值
 */
function getRangeRandom(low, high) {
    return Math.ceil(Math.random() * (high - low) + low);
}



/*
 * 获取 0~30° 之间的一个任意正负值
 */
function get30DegRandom() {
  return ((Math.random() > 0.5 ? '' : '-') + Math.ceil(Math.random() * 30));
}

var ImgFigure = React.createClass({
	handleClick: function(e){
		if (this.props.arrange.isCenter){
			this.props.inverse();
		}
		else{
			this.props.center();
		}
		e.stopPropagation();
		e.preventDefault();
	},
	render: function(){
		var styleObj = {};

        // 如果props属性中指定了这张图片的位置，则使用
        if (this.props.arrange.pos) {
            styleObj = this.props.arrange.pos;
        }

        // 如果图片的旋转角度有值并且不为0， 添加旋转角度
        if (this.props.arrange.rotate) {
          (['MozTransform', 'msTransform', 'WebkitTransform', 'transform']).forEach(function (value) {
            styleObj[value] = 'rotate(' + this.props.arrange.rotate + 'deg)';
          }.bind(this));
        }

        // 如果是居中的图片， z-index设为11
		if (this.props.arrange.isCenter) {
			styleObj.zIndex = 11;
        }

        var imgFigureClassName = 'img-figure';
            imgFigureClassName += this.props.arrange.isInverse ? ' is-inverse' : '';

        return (
            <figure className={imgFigureClassName} style={styleObj} onClick={this.handleClick}>
                <img src={this.props.data.imageURL}
                     alt={this.props.data.title}
                />
                <figcaption>
                    <h2 className="img-title">{this.props.data.title}</h2>
                    <div className="img-back" onClick={this.handleClick}>
                        <p>
                            {this.props.data.desc}
                        </p>
                    </div>
                </figcaption>
            </figure>
        );
    }
})

// 控制组件
var ControllerUnit = React.createClass({
    handleClick: function (e) {

        // 如果点击的是当前正在选中态的按钮，则翻转图片，否则将对应的图片居中
        if (this.props.arrange.isCenter) {
            this.props.inverse();
        } else {
            this.props.center();
        }

        e.preventDefault();
        e.stopPropagation();
    },
    render: function () {
        var controlelrUnitClassName = 'controller-unit';

        // 如果对应的是居中的图片，显示控制按钮的居中态
        if (this.props.arrange.isCenter) {
            controlelrUnitClassName += ' is-center';

            // 如果同时对应的是翻转图片， 显示控制按钮的翻转态
            if (this.props.arrange.isInverse) {
                controlelrUnitClassName += ' is-inverse';
            }
        }

        return (
            <span className={controlelrUnitClassName} onClick={this.handleClick}></span>
        );
    }
});

var AppComponent = React.createClass({
	Constant : {
		centerPos: {
	        left: 0,
	        right: 0
	    },
	    hPosRange: {   // 水平方向的取值范围
	        leftSecX: [0, 0],
	        rightSecX: [0, 0],
	        y: [0, 0]
	    },
	    vPosRange: {    // 垂直方向的取值范围
	        x: [0, 0],
	        topY: [0, 0]
	    }
	},

	getInitialState: function () {
	    return {
	        imgsArrangeArr: [
	            /*{
	                pos: {
	                    left: '0',
	                    top: '0'
	                },
	                rotate: 0,    // 旋转角度
	                isInverse: false,    // 图片正反面
	                isCenter: false,    // 图片是否居中
	            }*/
	        ]
	    };
	},

	/*
	   * 翻转图片
	   * @param index 传入当前被执行inverse操作的图片对应的图片信息数组的index值
	   * @returns {Function} 这是一个闭包函数, 其内return一个真正待被执行的函数
	   */
	inverse: function(index) {
	    return function (){
			var imgsArrangeArr = this.state.imgsArrangeArr;
			imgsArrangeArr[index].isInverse = !imgsArrangeArr[index].isInverse;

			this.setState({
				imgsArrangeArr: imgsArrangeArr
			});
		}.bind(this);
	},
	/*
	 * 重新布局所有图片
	 * @param centerIndex 指定居中排布哪个图片
	 */
	rearrange: function (centerIndex) {
	    var imgsArrangeArr = this.state.imgsArrangeArr,
	        Constant = this.Constant,
	        centerPos = Constant.centerPos,
	        hPosRange = Constant.hPosRange,
	        vPosRange = Constant.vPosRange,
	        hPosRangeLeftSecX = hPosRange.leftSecX,
	        hPosRangeRightSecX = hPosRange.rightSecX,
	        hPosRangeY = hPosRange.y,
	        vPosRangeTopY = vPosRange.topY,
	        vPosRangeX = vPosRange.x,

	        imgsArrangeTopArr = [],
	        topImgNum = Math.floor(Math.random() * 2),    // 取一个或者不取
	        topImgSpliceIndex = 0,

	        imgsArrangeCenterArr = imgsArrangeArr.splice(centerIndex, 1);

	        // 首先居中 centerIndex 的图片, 居中的 centerIndex 的图片不需要旋转
	        imgsArrangeCenterArr[0] = {
	          pos: centerPos,
	          rotate: 0,
	          isCenter: true
	        };

	        // 取出要布局上侧的图片的状态信息
	        topImgSpliceIndex = Math.ceil(Math.random() * (imgsArrangeArr.length - topImgNum));
	        imgsArrangeTopArr = imgsArrangeArr.splice(topImgSpliceIndex, topImgNum);

	        // 布局位于上侧的图片
	        imgsArrangeTopArr.forEach(function (value, index) {
	            imgsArrangeTopArr[index] = {
	              pos: {
	                  top: getRangeRandom(vPosRangeTopY[0], vPosRangeTopY[1]),
	                  left: getRangeRandom(vPosRangeX[0], vPosRangeX[1])
	              },
	              rotate: get30DegRandom(),
	              isCenter: false
	            };
	        });

	        // 布局左右两侧的图片
	        for (var i = 0, j = imgsArrangeArr.length, k = j / 2; i < j; i++) {
	            var hPosRangeLORX = null;

	            // 前半部分布局左边， 右半部分布局右边
	            if (i < k) {
	                hPosRangeLORX = hPosRangeLeftSecX;
	            } else {
	                hPosRangeLORX = hPosRangeRightSecX;
	            }

	            imgsArrangeArr[i] = {
	              pos: {
	                  top: getRangeRandom(hPosRangeY[0], hPosRangeY[1]),
	                  left: getRangeRandom(hPosRangeLORX[0], hPosRangeLORX[1])
	              },
	              rotate: get30DegRandom(),
	              isCenter: false
	            };

	        }

	        if (imgsArrangeTopArr && imgsArrangeTopArr[0]) {
	            imgsArrangeArr.splice(topImgSpliceIndex, 0, imgsArrangeTopArr[0]);
	        }

	        imgsArrangeArr.splice(centerIndex, 0, imgsArrangeCenterArr[0]);	       
	        this.setState({
	            imgsArrangeArr: imgsArrangeArr
	        });
	},

	/*
	* 利用arrange函数， 居中对应index的图片
	* @param index, 需要被居中的图片对应的图片信息数组的index值
	* @returns {Function}
	*/
  	center: function (index) {
    	return function () {
      		this.rearrange(index);
    	}.bind(this);
  	},
	componentDidMount:function() {
		  	 // 首先拿到舞台的大小
	    var stageDOM = ReactDOM.findDOMNode(this.refs.stage),
	        stageW = stageDOM.scrollWidth,
	        stageH = stageDOM.scrollHeight,
	        halfStageW = Math.ceil(stageW / 2),
	        halfStageH = Math.ceil(stageH / 2);

	    // 拿到一个imageFigure的大小
	    var imgFigureDOM = ReactDOM.findDOMNode(this.refs.imgFigure0),
	        imgW = imgFigureDOM.scrollWidth,
	        imgH = imgFigureDOM.scrollHeight,
	        halfImgW = Math.ceil(imgW / 2),
	        halfImgH = Math.ceil(imgH / 2);

	    // 计算中心图片的位置点
	    this.Constant.centerPos = {
	        left: halfStageW - halfImgW,
	        top: halfStageH - halfImgH
	    };

	    // 计算左侧，右侧区域图片排布位置的取值范围
	    this.Constant.hPosRange.leftSecX[0] = -halfImgW;
	    this.Constant.hPosRange.leftSecX[1] = halfStageW - halfImgW * 3;
	    this.Constant.hPosRange.rightSecX[0] = halfStageW + halfImgW;
	    this.Constant.hPosRange.rightSecX[1] = stageW - halfImgW;
	    this.Constant.hPosRange.y[0] = -halfImgH;
	    this.Constant.hPosRange.y[1] = stageH - halfImgH;

	    // 计算上侧区域图片排布位置的取值范围
	    this.Constant.vPosRange.topY[0] = -halfImgH;
	    this.Constant.vPosRange.topY[1] = halfStageH - halfImgH * 3;
	    this.Constant.vPosRange.x[0] = halfStageW - imgW;
	    this.Constant.vPosRange.x[1] = halfStageW;

	    this.rearrange(0);
	},
	render:function() {
	  	var controllerUnits = [],
	  		imgFigures = [];

	  	imageDatas.forEach(function(value, index){
	  		if (!this.state.imgsArrangeArr[index]) {
	            this.state.imgsArrangeArr[index] = {
	                pos: {
	                    left: 0,
	                    top: 0
	                },
	                rotate: 0,
	                isInverse: false,
	                isCenter: false
	            };
	        }
	  		imgFigures.push(<ImgFigure key={value.fileName} ref={'imgFigure' + index} data={value} arrange={this.state.imgsArrangeArr[index]} inverse={this.inverse(index)} center={this.center(index)}/>);
	  		controllerUnits.push(<ControllerUnit key={index} arrange={this.state.imgsArrangeArr[index]} inverse={this.inverse(index)} center={this.center(index)}/>);
	  	}.bind(this));

	    return (
	      	<section className="stage" ref="stage">
		       	<section className="img-sec">
		       		{imgFigures}
		       	</section>
		       	<nav className="controller-nav">
		       		{controllerUnits}
		       	</nav>
		    </section>
	    );
	  }
})

export default AppComponent;
